
<template>
  <div>
    <div style="padding: 12px 0">
        <div class="card">
          <BasicForm @register="registerFilter" @submit="onSearch">
          </BasicForm>

          <BasicTable @register="state[0].registerTable" :resizeHeightOffset="44">
          </BasicTable>
        </div>
      </div>
  </div>
</template>

<script setup>
import {defineOptions, h, nextTick, onMounted, reactive, watch} from 'vue';
import dayjs from 'dayjs'
import {useRouter} from 'vue-router';

import {BasicTable, useTable} from '@/components/Table';
import {PAGE} from '@/api/http';

import {BasicForm, useForm} from '@/components/Form/index';
import ProImgCell from "@/widget/pro-img-cell.vue";

defineOptions({name: 'MemberServiceLog'});

const props = defineProps({
  memberCode: {
    type: String,
  },
});

const router = useRouter();

const [registerFilter, filter] = useForm({
  baseColProps: {style: {paddingRight: '12px'}},
  actionColOptions: {span:6},
  submitOnReset: true,
  schemas: [
    {
      field: 'goodsName',
      component: 'Input',
      componentProps: {
        placeholder: '输入商品名称进行搜索',
      },
      colProps: {span: 6},
    },

    {
      field: 'startTime',
      component: 'DatePicker',
      componentProps: {
        showTime: false,
        placeholder: '开始日期',
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
        disabledDate: (value) => filter.getFieldsValue().endTime < dayjs(value).format("YYYY-MM-DD")
      },
      colProps: {span: 6},
    },

    {
      field: 'endTime',
      component: 'DatePicker',
      componentProps: {
        showTime: false,
        placeholder: '结束日期',
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
        disabledDate: (value) => filter.getFieldsValue().startTime > dayjs(value).format("YYYY-MM-DD")
      },
      colProps: {span: 6},
    },
  ],
});

const [registerTable0, table0] = useTable({
  api: PAGE('/cashier/getMasterOrderServiceList'),
  immediate: false,
  beforeFetch: (arg) => Object.assign(getSearchArg(arg), {}),
  columns: [
    {
      title: '商品信息',
      dataIndex: 'goodsName',
      ellipsis: false,
      width: 290,
      customRender: ({value: title, record}) =>
        h(ProImgCell, {src: record.goodsThumb, title}),
    },

    {
      title: '数量',
      dataIndex: 'goodsQty',
      ellipsis: false,
      width: 80,
    },

    {
      title: '实付价格',
      dataIndex: 'totalTransactionPrice',
      ellipsis: false,
    },

    {
      title: '美容师',
      dataIndex: 'employeeName',
      ellipsis: false,
    },
    {
      title: '服务时间',
      dataIndex: 'addTime',
      ellipsis: false,
    },
    {
      title: '操作人',
      dataIndex: 'cashierName',
      ellipsis: false,
    },
    {
      title: '支付方式',
      dataIndex: 'payType',
      ellipsis: false,
    },
  ],
  useSearchForm: false,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: false,
  rowKey: 'id',
});

const state = reactive({
  search: {
    type: 0
  },
  0: {
    registerTable: registerTable0,
    table: table0,
  },
});

function getSearchArg(arg) {
  const {memberCode} = props;
  const data = filter.getFieldsValue();
  return Object.assign(arg, data,{memberCode});
}

onMounted(() => {
  onSearch();
});

watch(
  () => state.search.type,
  () => nextTick(onSearch),
);

async function onSearch() {
  const {type} = state.search,
    target = state[type];

  target.table.reload();
  target.table.redoHeight();
}
</script>
<style lang="less" scoped>
.card {
  padding: 16px;
}
</style>

